<%@ page import="java.util.Date" %>
<%@ page import="java.lang.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: 张勇
  Date: 2018/2/7
  Time: 23:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/mystyle.css" type="text/css">
    <!-- Bootstrap CSS -->
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
    <link rel="stylesheet" href="css/bootstrap.css"/>

    <!--the css for jquery.mCustomScrollbar-->
    <link rel="stylesheet" href="lib/css/jquery.mCustomScrollbar.min.css"/>
    <!--the css for this plugin-->
    <link rel="stylesheet" href="css/jquery.emoji.css"/>
    <title>首页</title>
</head>
<body>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.js"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
<!--(Optional) the js for jquery.mCustomScrollbar's addon-->
<script src="lib/script/jquery.mousewheel-3.0.6.min.js"></script>
<!--the js for jquery.mCustomScrollbar-->
<script src="lib/script/jquery.mCustomScrollbar.min.js"></script>
<!--the js for this plugin-->
<script src="js/jquery.emoji.js"></script>

<%--<script src="js/common.js"></script>--%>
<script type="text/javascript">
    $(document).ready(function () {

        var islogined =<%=session.getAttribute("islogined")%>;
        var username;
        if (islogined == null) {
            islogined = false;
        }
        console.log("用户是否登录：" + islogined);
        if (islogined) {  //用户已经登录
            //var signin=document.getElementById("signin");
            $("#signin").hide();
            $("#signup").hide();
            $("#split").hide();
            $("#usercontrol").show();
            username = "<%=session.getAttribute("username")%>";
            //$("#username").text("<%=session.getAttribute("username")%>");
            $("#username").text(username);
            $(".attentionCount").text("<%=session.getAttribute("attentionCount")%>");
            $(".fanCount").text("<%=session.getAttribute("fanCount")%>")
        } else {
            $("#signin").show();
            $("#signup").show();
            $("#split").show();
            $("#usercontrol").hide();
            $("#username").text("登录后，方可看见更加博大的美食世界");
        }


        $(".evaluate").click(function () {
            $(".state-evaluate").show();
        })


        $("#forward_btn").click(function () {       //模态框的转发按钮点击后的事件
            var content = $("#forwardcontent").html();
            console.log("评论内容：" + content);
            console.log("动态id" + sharestateID);

            $("#loading").modal('toggle');
            var check = document.getElementById("check");
            if (check) {
                var $ullist = $statenode.children(".eva_list");
                var $li = $("<li class=\"clearfix list-group-item\" style=\"border: 0px solid transparent\">\n" +
                    "                        <div>\n" +
                    "                            <img src=\"image/userimage.png\" class=\"float-left img-fluid rounded-circle\" style=\"width: 40px;height: 40px\"/>\n" +
                    "                            <span class=\"eva_name align-middle\">" + username + ":" + "</span>\n" +
                    "                            <span class=\"eva_con align-bottom\">" + content + "</span>\n" +
                    "                        </div>\n" +
                    "                    </li>")
                $ullist.append($li);
            }
            $.post("forwardstate", {       //ajax 请求发送到pubeva
                stateid: sharestateID,
                content: content,
                comment: check.checked
            }, function (data, textStatus) {
                console.log(data.result);
                $("#loading").modal('toggle');
                if (data.result) {       //成功后，修改界面显示,构建转发节点
                    var $root = $("<div id=" + data.dynamicID + " style=\"padding-bottom: 100px\"></div>");
                    var img;
                    if (data.userimg == null) {
                        img = "image/userimage.png";  //默认头像
                    } else {
                        img = data.userimg;
                    }
                    var $medio = $("<div class=\"media\">\n" +
                        "                        <img class=\"mr-3 rounded-circle\" src=" + img + " alt=\"Generic placeholder image\"\n" +
                        "                             style=\"max-width: 50px;max-height: 50px\">\n" +
                        "                        <div class=\"media-body\">\n" +
                        "                            <h5 class=\"mt-0\">" + data.username + "</h5>\n" +
                        "                            <span class=\"small\">" + data.time + "</span>\n" +
                        "                        </div>\n" +
                        "                    </div>")
                    $root.append($medio);
                    var $forward_eva = $("<span class=\"d-block\" style=\"padding: 5px\">" + data.dynamic_text + "</span>");
                    $root.append($forward_eva);

                    var $forward_content = $("<div class=\"w-100 forwardedstate\">\n" +
                        "\n" +
                        "                        <h6 class=\"strong\">" + data.forward_dynamic.user.username + "</h6>\n" +
                        "                        <span class=\"d-block\" style=\"padding: 5px\">" + data.forward_dynamic.dynamic_word + "</span>\n" +
                        " </div>");
                    if (data.forward_dynamic.dynamic_image != null && data.forward_dynamic.dynamic_image != "") {
                        var width;
                        if (data.forward_dynamic.dynamic_imgList.length > 3) {
                            width = 30;
                        } else {
                            width = 40;
                        }
                        for (var i = 0; i < data.forward_dynamic.dynamic_imgList.length; ++i) {
                            var $imgnode = $("<img src=" + data.forward_dynamic.dynamic_imgList[i] + " class=\"img-fluid\" style=\"max-width:" + width + "%;max-height:300px;\">")
                            $forward_content.append($imgnode);
                            if (i % 2 == 0) {
                                $imgnode.append($("</br>"))
                            }
                        }
                    }
                    if (data.forward_dynamic.dynamic_video != null && data.forward_dynamic.dynamic_video != "") {
                        var $videonode = $("<video controls class=\"mw-100 mx-auto\" style=\"padding-top: 20px\">\n" +
                            "                                    <source src=" + data.forward_dynamic.dynamic_video + " type=\"video/mp4\">\n" +
                            "                                </video>");
                        $forward_content.append($videonode);
                    }

                    $root.append($forward_content);

                    var $state_tail = $("<div class=\"state-tail clearfix \" style=\"margin-top: 20px\">\n" +
                        "                        <img src=\"image/dianzan.png\" alt=\"好吃\" class=\"dianzan float-left mutual\"\n" +
                        "                             style=\"max-width: 25px;max-height: 25px;margin-left: 20px;cursor: pointer\">\n" +
                        "                        <p class=\"count small float-left text-muted\" style=\"margin-top: 5px\">1000</p>\n" +
                        "                        <p class=\"small float-left text-muted\" style=\"margin-top: 5px\">人觉得好吃</p>\n" +
                        "                        <img src=\"image/evaluate.png\" alt=\"评论\" class=\"evaluate float-left mutual\"\n" +
                        "                             style=\"max-width: 25px;max-height: 25px;margin-left: 20px;cursor: pointer\">\n" +
                        "                        <img src=\"image/share.png\" alt=\"分享\" class=\"share float-left mutual\"\n" +
                        "                             style=\"max-width: 25px;max-height: 25px;margin-left: 20px;cursor: pointer\">\n" +
                        "                    </div>");

                    $root.append($state_tail);

                    var $eva_list = $("<ul class=\"list-group eva_list\"></ul>");

                    $root.append($eva_list);
                    var $eva_input = $("<div class=\"d-block evaluate_content border border-info rounded w-100\" contenteditable=\"true\"\n" +
                        "                     aria-placeholder=\"评论\" style=\"margin-bottom: 10px;height: 50px;\"  ></div>\n" +
                        "                <img src=\"<s:url value="image/emoji.png"/>\" class=\"emoji_btn\">\n" +
                        "                <button class=\"btn btn-sm btn-outline-success float-right eva_btn\">评论</button>");
                    $root.append($eva_input);
                    $root.hide();       //先隐藏
                    $(".state_container").prepend($root);

                    $("#forwardcontent").html("");
                    $("#myModal").modal('hide');
                    $root.show("slow"); //慢慢显示出来，这样有动画效果
                } else {
                    alert("发生错误，请重试");
                }
            }, "json");
        })

        $(".state_container").on('click', '.evaluate', function (event) {      //评论小图标事件
            var $content = $(this).parent().next().next();
            $content.focus();
        })

        $(".state_container").on('click', '.dianzan', function () {       //点赞小图标事件

            if (username == null || username == undefined || username == "") {
                alert("请您先登录");
                return;
            }
            var stateid = $(this).parent().parent().attr("id");
            var $dianzan = $(this);

            var srcvalue = $dianzan.attr("src");
            console.log(srcvalue);
            if (srcvalue == "image/dianzan.png") {
                $dianzan.attr("src", "image/dianzan2.png")
                var s = $dianzan.next().text();
                var count = parseInt(s) + 1;
                $dianzan.next().text(count.toString());
                has_dianzan = true;
            } else {
                $dianzan.attr("src", "image/dianzan.png")
                var s = $dianzan.next().text();
                var count = parseInt(s) - 1;
                $dianzan.next().text(count.toString());
                has_dianzan = false;
            }

            $.post("dianzanstate", {
                stateid: stateid
            }, function (data, textstatus) {
                if (data.result) {
                }
            }, "json");

        })  //点赞小图标事件

        $(".state_container").on('click', '.emoji_btn', function (event) {
            $(this).prev().emoji({
                showTab: false,
                button: this,
                animation: 'fade',
                icons: [{
                    path: "image/emoji/tieba/",
                    maxNum: 50,
                    file: ".jpg",
                    placeholder: ":{alias}:",
                    alias: {
                        1: "hehe",
                        2: "haha",
                        3: "tushe",
                        4: "a",
                        5: "ku",
                        6: "lu",
                        7: "kaixin",
                        8: "han",
                        9: "lei",
                        10: "heixian",
                        11: "bishi",
                        12: "bugaoxing",
                        13: "zhenbang",
                        14: "qian",
                        15: "yiwen",
                        16: "yinxian",
                        17: "tu",
                        18: "yi",
                        19: "weiqu",
                        20: "huaxin",
                        21: "hu",
                        22: "xiaonian",
                        23: "neng",
                        24: "taikaixin",
                        25: "huaji",
                        26: "mianqiang",
                        27: "kuanghan",
                        28: "guai",
                        29: "shuijiao",
                        30: "jinku",
                        31: "shengqi",
                        32: "jinya",
                        33: "pen",
                        34: "aixin",
                        35: "xinsui",
                        36: "meigui",
                        37: "liwu",
                        38: "caihong",
                        39: "xxyl",
                        40: "taiyang",
                        41: "qianbi",
                        42: "dnegpao",
                        43: "chabei",
                        44: "dangao",
                        45: "yinyue",
                        46: "haha2",
                        47: "shenli",
                        48: "damuzhi",
                        49: "ruo",
                        50: "OK"
                    },
                    title: {
                        1: "呵呵",
                        2: "哈哈",
                        3: "吐舌",
                        4: "啊",
                        5: "酷",
                        6: "怒",
                        7: "开心",
                        8: "汗",
                        9: "泪",
                        10: "黑线",
                        11: "鄙视",
                        12: "不高兴",
                        13: "真棒",
                        14: "钱",
                        15: "疑问",
                        16: "阴脸",
                        17: "吐",
                        18: "咦",
                        19: "委屈",
                        20: "花心",
                        21: "呼~",
                        22: "笑脸",
                        23: "冷",
                        24: "太开心",
                        25: "滑稽",
                        26: "勉强",
                        27: "狂汗",
                        28: "乖",
                        29: "睡觉",
                        30: "惊哭",
                        31: "生气",
                        32: "惊讶",
                        33: "喷",
                        34: "爱心",
                        35: "心碎",
                        36: "玫瑰",
                        37: "礼物",
                        38: "彩虹",
                        39: "星星月亮",
                        40: "太阳",
                        41: "钱币",
                        42: "灯泡",
                        43: "茶杯",
                        44: "蛋糕",
                        45: "音乐",
                        46: "haha",
                        47: "胜利",
                        48: "大拇指",
                        49: "弱",
                        50: "OK"
                    }
                }, {
                    path: "image/emoji/qq/",
                    maxNum: 91,
                    excludeNums: [41, 45, 54],
                    file: ".gif",
                    placeholder: "#qq_{alias}#"
                }]
            });
            // event.stopPropagation();
        })      //emoji按钮事件

        $(".state_container").on('click', '.eva_btn', function (event) {        //评论按钮点击事件

            if (username == null || username == undefined || username == "") {
                alert("请您先登录");
                return;
            }
                var content = $(this).prev().prev().html();
                //var content = $(this).prev().prev().val();
                console.log("评论内容：" + content);
                var id = $(this).parent().attr("id");     //获得动态的ID
                console.log("动态id" + id);

                var $evalist = $(this).prev().prev().prev();
                var $content = $(this).prev().prev();


                $.post("pubeva", {       //ajax 请求发送到pubeva
                    content: content,
                    stateid: id
                }, function (data, textStatus) {
                    console.log(data.result);
                    if (data.result) {       //成功后，修改界面显示
                        var $li = $("<li class=\"clearfix list-group-item\" style=\"border: 0px solid transparent\">\n" +
                            "                        <div>\n" +
                            "                            <img src=\"image/userimage.png\" class=\"float-left img-fluid rounded-circle\" style=\"width: 40px;height: 40px\"/>\n" +
                            "                            <span class=\"eva_name align-middle\">" + username + ":" + "</span>\n" +
                            "                            <span class=\"eva_con align-bottom\">" + content + "</span>\n" +
                            "                        </div>\n" +
                            "                    </li>")
                        $evalist.append($li);
                        $content.html("");
                    } else {
                        alert("请先登录，然后重试！谢谢");
                    }
                }, "json");

            }
        )      //评论按钮事件

        var sharestateID;
        var $statenode;
        $(".state_container").on('click', ".share", function () {     //分享小图标事件
            if (username == null || username == undefined || username == "") {
                alert("请您先登录");
                return;
            }
            $statenode = $(this).parent().parent();
            sharestateID = $statenode.attr("id");
            $('#myModal').modal('show')
        })
    })


</script>


<style>
    .body-container {
        float: left;
        margin: 5px;
    }

    .leftNav {
        float: left;
    }
</style>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">转发动态</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span>请输入评论：</span>
                <div id="forwardcontent" class="border border-primary rounded mx-auto" contenteditable="true"
                     style="width: 80%;height: 150px;margin: 20px;">

                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="check">
                    <label class="form-check-label" for="check">是否同时评论</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="forward_btn" class="btn btn-primary ">转发</button>
            </div>
        </div>
    </div>
</div>

<div id="loading" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">等待中...</h5>

            </div>
            <div class="modal-body">
                <img src="image/loading.gif" class="img-fluid"/>
            </div>
        </div>
    </div>
</div>
<header>
    <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
        <a class="navbar-brand" href="javascript:void(0);"><img src="<s:url value="/image/logo1.png"/>" alt="logo"
                                                                style="width:40px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<s:url value="/class"/>">美食课堂</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<s:url value="/location"/> ">同城美食</a>
                </li>
            </ul>
            <form class="form-inline mt-2 mt-md-0">
                <input class="form-control mr-sm-2" type="text" placeholder="搜索" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>

            <div id="signin" class="nav-item" style="margin-left: 10px">
                <a href="<s:url value="/login"/> " class="nav-link">登录</a>
            </div>
            <span id="split" class="navbar-text">|</span>
            <div id="signup" class="nav-item">
                <a href="<s:url value="/regist"/> " class="nav-link">注册</a>
            </div>
            <div id="usercontrol" class="nav-item dropdown ">
                <a class="nav-link dropdown-toggle navbar-brand" data-toggle="dropdown" href="#">
                    <img class="img-circle" src="<s:url value="/image/userimage.png"/>" style="width: 40px;"/>
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="<s:url value="/userpage"/>">个人主页</a>
                    <a class="dropdown-item" href="<s:url value="/createstate"/>">创建动态</a>
                    <a class="dropdown-item" href="<s:url value="/set"/>">设置</a>
                    <a class="dropdown-item" href="<s:url value="/loginout"/>">退出</a>
                </div>
            </div>
        </div>
    </nav>
</header>
<main role="main">
    <div class="container clearfix" style="margin-top: 20px">
        <div class="row">
            <div class="col-lg-2">
                <nav class="navbar navbar-light navbar-transparent" role="navigation">
                    <ul class="navbar-nav">
                        <div class="card nav-item" style="width:100%;height:auto;">
                            <img class="card-img-top userimage rounded img-responsive" src="image/userimage.png"
                                 alt="Card image">
                            <div class="card-body">
                                <h6 id="username" class="text-center card-title">用户名</h6>
                                <div class="card-text">
                                    <nav class="navbar navbar-expand-md">
                                        <ul class="navbar-nav">
                                            <li class="nav-item">
                                                <a href="<s:url value="/userfans"/>" class="nav-link small">关注：<p
                                                        class="attentionCount">0</p></a>
                                            </li>
                                            <span class="navbar-text">|</span>
                                            <li class="nav-item">
                                                <a href="<s:url value="/userattentions"/>" class="nav-link small">粉丝：<p
                                                        class="fanCount">0</p></a>
                                            </li>

                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <li class="nav-item active">
                            <a href="javascript:void(0);" class="nav-link">全部</a>
                        </li>
                        <li class="nav-item">
                            <a href="<s:url value="/attention" />" class="nav-link urlNav">关注</a>
                        </li>
                        <li class="nav-item">
                            <a href="<s:url value="/myclass"/>" class="nav-link">美食课堂动态</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" target="_blank" class="nav-link urlNav">私信</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class="col-lg-7 state_container" style="padding: 20px">

                <c:forEach var="dynamic" items="${dynamicList}">
                    <div id="${dynamic.dynamic_id}" style="padding-bottom: 100px">
                        <div class="media">

                            <a href="<s:url value="/userpage?username=${dynamic.user.username}"/>">
                                <img class="mr-3 rounded-circle" src="<s:url value="image/userimage.png"/>"
                                     alt="userimg"
                                     style="max-width: 50px;max-height: 50px">
                            </a>
                            <div class="media-body">
                                <a href="<s:url value="/userpage?username=${dynamic.user.username}"/>"><h5
                                        class="mt-0">${dynamic.user.username}</h5></a>
                                <span class="small">${dynamic.dynamic_date}</span>
                            </div>
                        </div>
                        <div>
                            <span class="d-block" style="padding: 5px">${dynamic.dynamic_word}</span>

                            <c:set var="width" value="${80/dynamic.imgCount}"/>
                                <%--不是转发的动态--%>

                            <c:if test="${dynamic.follow_dynamic_id==0}">
                                <c:if test="${dynamic.dynamic_image.trim().length()>0}">
                                    <c:forEach var="img" items="${dynamic.dynamic_imgList}">
                                        <img src="<s:url value="${img}"/>" class="img-fluid"
                                             style="max-width:${width}%;max-height:300px;">
                                    </c:forEach>
                                </c:if>
                                <c:if test="${dynamic.dynamic_video!=null&&dynamic.dynamic_video.trim().length()>0}">

                                    <video controls class="mw-100 mx-auto" style="padding-top: 20px">
                                        <source src="<s:url value="${dynamic.dynamic_video}"/>" type="video/mp4">
                                    </video>

                                </c:if>
                            </c:if>
                            <c:if test="${dynamic.follow_dynamic_id>0}">
                                <div class="w-100 forwardedstate">

                                    <h6 class="strong">@${dynamic.forwardDynamic.user.username}</h6>
                                    <span class="d-block"
                                          style="padding: 5px">${dynamic.forwardDynamic.dynamic_word}</span>
                                    <c:set var="width" value="${80/dynamic.forwardDynamic.imgCount}"/>
                                    <c:if test="${dynamic.forwardDynamic.dynamic_image.trim().length()>0}">
                                        <c:forEach var="img" items="${dynamic.forwardDynamic.dynamic_imgList}">
                                            <img src="<s:url value="${img}"/>" class="img-fluid"
                                                 style="max-width:${width}%;max-height:300px;">
                                        </c:forEach>
                                    </c:if>
                                    <c:if test="${dynamic.forwardDynamic.dynamic_video!=null&&dynamic.forwardDynamic.dynamic_video.trim().length()>0}">

                                        <video controls class="mw-100 mx-auto" style="padding-top: 20px">
                                            <source src="<s:url value="${dynamic.forwardDynamic.dynamic_video}"/>"
                                                    type="video/mp4">
                                        </video>

                                    </c:if>

                                </div>
                            </c:if>
                        </div>
                        <hr/>
                        <div class="state-tail clearfix" style="margin-top: 20px">
                            <c:if test="${!dynamic.thumb}">
                                <img src="image/dianzan.png" alt="好吃" class="dianzan float-left mutual"
                                     style="max-width: 25px;max-height: 25px;margin-left: 20px;cursor: pointer">
                            </c:if>
                            <c:if test="${dynamic.thumb}">
                                <img src="image/dianzan2.png" alt="好吃" class="dianzan float-left mutual"
                                     style="max-width: 25px;max-height: 25px;margin-left: 20px;cursor: pointer">
                            </c:if>

                            <p class="count small float-left text-muted"
                               style="margin-top: 5px">${dynamic.thumbCount}</p>
                            <p class="small float-left text-muted" style="margin-top: 5px">人觉得好吃</p>

                            <img src="image/evaluate.png" alt="评论" class="evaluate float-left mutual"
                                 style="max-width: 25px;max-height: 25px;margin-left: 20px;cursor: pointer">

                            <img src="image/share.png" alt="分享" class="share float-left mutual"
                                 style="max-width: 25px;max-height: 25px;margin-left: 20px;cursor: pointer">
                        </div>
                        <ul class="list-group eva_list">
                            <c:forEach var="comment" items="${dynamic.commentList}">
                                <li class="clearfix list-group-item" style="border: 0px solid transparent">
                                    <div>
                                        <img src="image/userimage.png" class="float-left img-fluid rounded-circle"
                                             style="width: 40px;height: 40px"/>
                                        <span class="eva_name align-middle">${comment.commentUsername}:</span>
                                        <span class="eva_con align-bottom">${comment.commentContent}</span>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>

                        <div class="d-block evaluate_content border" contenteditable="true"
                             aria-placeholder="评论" style="margin-bottom: 10px;height: 50px;"></div>
                        <img src="<s:url value="image/emoji.png"/>" class="d-block emoji_btn"/>
                        <button class="btn btn-sm btn-outline-success float-right eva_btn">评论</button>
                            <%--小号按钮比较好看--%>
                    </div>
                </c:forEach>
            </div>


            <div class="col-lg-3">
                <div class="card">
                    <div class="card-header text-center bg-primary text-white">
                        <h4>美食排行榜</h4>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>名称</th>
                                <th>热度</th>
                            </tr>

                            </thead>
                            <tbody>
                            <tr>
                                <th>1</th>
                                <th scope="row">重庆火锅</th>
                                <th>12000</th>
                            </tr>
                            <tr>
                                <th>2</th>
                                <th>烤鸭</th>
                                <th>10000</th>
                            </tr>
                            <tr>
                                <th>3</th>
                                <th>海鲜</th>
                                <th>9996</th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
</body>
</html>